<template>
	<view class="flex px-2 py-3 border-bottom" >
		
		<view>
			<free-avatar :src="item.avatar" size="80"></free-avatar>
		</view>
	
		<view class="flex flex-column pl-2 flex-1">
			<!-- 昵称 -->
			<text class="font-md text-primary">{{item.user_name}}</text>
			<!-- 内容 -->
			<text class="font text-dark mb py-1" style="width: 610rpx;overflow-wrap: break-word;">{{item.content}}</text>
			
			<!-- 图片 -->
			<view class="pt-2 flex flex-wrap" v-if="item.image.length>0">
				<block v-for="(item2,index2) in item.image" :key="index2">
					<!-- 单图 -->
					
					<free-image @click="previewImage(item.image[0])" v-if="item.image.length===1" :src="item2" imageClass="rounded"></free-image>
					<!-- 多图 -->
					<image v-else @click="previewImage(item2)" :src="item2" mode="aspectFill" style="height: 180rpx;width: 180rpx;" class="bg-secondary mr-1 mb-1 rounded"></image>
							
				</block>
						
			</view>
			
			<!-- 视频 -->
			
			<view class="pt-2 flex flex-wrap" v-if="item.video.src.length">
				<free-video @click="openVideo" :index="index" :videoPoster="item.video.poster"></free-video>
						
			</view>
			<!-- 时间及评论 -->
			<view class="flex-a justify-between py-1 position-relative">
				<!-- 时间 -->
				<text class="text-muted font-sm  ">{{item.created_at | formateTime}}</text>
				<!-- 操作 -->
				<view class="rounded flex-a-j page-color "  hover-class="bg-hover-light" @click="$emit('action',{item,index})">
					<text class="iconfont font-md px-1 ">&#xe6fd;</text>
					
				</view>
				
				
			</view>
			
			<!-- 评论 -->
			<view v-if="item.likes.length || item.comments.length" class="page-color flex flex-column" >
				<view class=" p-2 border-bottom flex " >
					<text class="iconfont font text-info">&#xe637;</text>
					<view v-for="(item3,index3) in item.likes" :key="index3" class="flex">
						<text class="font text-info mx-1">{{item3.name}}</text>
					</view> 
					
				</view>
				
				
				<view @click="$emit('reply',item4)" class=" flex p-2" style="box-sizing: border-box;" v-for="(item4,index4) in item.comments" :key="index4">
					
					<text v-if="!item4.reply" class="font  text-info mr-1" style="overflow-wrap: break-word;">{{item4.user.name}}: </text>
					<text v-else class="font  text-info" style="overflow-wrap: break-word;">{{item4.user.name}}</text>
					
					
					<text v-if="item4.reply && item4.reply.id" class="font  text-dark mx-1" style="overflow-wrap: break-word;">回复</text>
					<text v-if="item4.reply" class="font  text-info mr-1" style="overflow-wrap: break-word;">{{item4.reply.name}}: </text>
					
					<text class="font text-dark " style="overflow-wrap: break-word;">{{item4.content}}</text>
				</view>
				
			</view>
			
		</view>
	</view>
</template>

<script>
	import freeAvatar from "@/components/free-ui/free-avatar.vue"
	import freeImage from "@/components/free-ui/free-image.vue"
	import freeVideo from "@/components/free-ui/free-video.vue"
	import $T from "@/common/time.js"
	export default {
		props:{
			item:{
				default:()=>{},
				type:Object
			},
			index:{
				default:0,
				type:Number
			}
		},
		components:{
			freeAvatar,freeImage,freeVideo
		},
		computed:{
			
		},
		data(){
			return {
				// zanOrComment:false,
			}
		},
		methods:{
			
			openVideo(e){
				
				uni.navigateTo({
					url: `/pages/chat/video/video?url=${this.item.video.src?this.item.video.src:''}`,
				});
			},
		
			//查看大图
			previewImage(src){
				
				uni.previewImage({
					current:src,
					urls: this.item.image,
				});
			}
		},
		filters:{
			formateTime(val){
				if(val){
					return $T.gettime(val)
				}
			}
		}
	}
</script>

<style>
</style>
